<template>
  <div class="recore-detail-container">
    <div class="class-card">
      <div class="card-box">
        <div class="left">
          <div class="class-name">{{ rec.detail.classes }}</div>
          <div class="name">班主任：{{ rec.teacherName || "-" }}</div>
        </div>
      </div>
    </div>

    <div class="patrol-info">
      <div class="title">巡查信息</div>
      <div class="patrol-item">
        时间：<span>{{
          dayjs(rec.detail.createTime).format("YYYY-MM-DD HH:mm:ss")
        }}</span>
      </div>
      <div class="patrol-item">
        评价人：<span>{{ rec.detail.inspector }}</span>
      </div>
      <div class="patrol-item">
        学生行为：<span
          :class="`behavior ${rec.detail.behaviorScore > 0 ? 'green' : ''}`"
          >{{ rec.detail.behaviorDetail }}</span
        >
      </div>
      <div class="patrol-item">
        分数：<span
          :class="`score ${rec.detail.behaviorScore > 0 ? 'green' : ''}`"
          >{{
            rec.detail.behaviorScore > 0
              ? "+" + rec.detail.behaviorScore
              : rec.detail.behaviorScore
          }}</span
        >
      </div>
      <div class="patrol-item">
        备注说明：
        <div>
          {{ rec.detail.remark }}
        </div>
      </div>
      <div class="patrol-item" v-if="rec.detail.images && rec.detail.images.length>0">
        照片：
        <div class="img-box">
          <img v-for="item in rec.detail.images" :key="item" :src="item" @click="previewImg(item)"/>
        </div>
      </div>
    </div>

    <div class="evaluate-info">
      <div class="title">评价操作信息</div>
      <div
        v-for="item in rec.detail.operatorRecordS"
        :key="item.operaTime"
        style="marginbottom: 20px"
      >
        <div class="evaluate-item">
          <div>
            <span class="role">{{ item.operator }}</span>
            <span>{{ item.operaType }}</span>
          </div>
          <span>{{ item.operaTime }}</span>
        </div>
        <div class="result">原因：{{ item.reason }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import LocalCache from "@/utils/cache";
import { onMounted } from "vue";
import { useRoute } from "vue-router";
import { ImagePreview } from "vant";
import dayjs from "dayjs";

document.title = "记录详情";

const route = useRoute();

const rec = reactive({
  detail: {},
  teacherName: "",
});
const previewImg = (item: string) => {
  console.log(item);
  ImagePreview([item]);
};
onMounted(() => {
  rec.detail = LocalCache.getSession("recoreDetail");
  rec.teacherName = route.query.teacherName as string;
});
</script>

<style lang="less" scoped>
.recore-detail-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f7f7f7;

  .class-card {
    background-color: #fff;
    padding: 16px;

    .card-box {
      height: 100%;
      background-image: url(~@/assets/img/card_bg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border-radius: 10px;
      padding: 24px 0 24px 16px;
      color: #fff;
      display: flex;
      justify-content: space-between;

      .left {
        .class-name {
          font-size: 16px;
          font-weight: 500;
          line-height: 22px;
        }

        .name {
          font-size: 12px;
          line-height: 17px;
          margin-top: 8px;
        }
      }
    }
  }

  .patrol-info {
    background-color: #fff;
    padding: 0 16px 16px 16px;

    .title {
      font-size: 14px;
      font-weight: 500;
      color: #303233;
      margin-bottom: 12px;
    }

    .patrol-item {
      margin-top: 8px;
      font-size: 12px;
      line-height: 17px;
      color: #919599;

      .behavior {
        color: #fa5646;
      }

      .score {
        color: #fa5646;
      }

      .green {
        color: #00c294;
      }

      span {
        color: #303233;
      }

      div {
        color: #303233;
        margin-top: 8px;
      }
    }
  }

  .evaluate-info {
    background-color: #fff;
    padding: 16px;
    margin-top: 8px;

    .title {
      font-size: 14px;
      font-weight: 500;
      color: #303233;
      margin-bottom: 12px;
    }

    .evaluate-item {
      height: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #919599;
      margin-bottom: 8px;

      .role {
        color: #303233;
        margin-right: 8px;
      }
    }

    .result {
      background: #f5f7fa;
      border-radius: 10px;
      color: #303233;
      font-size: 12px;
      line-height: 16px;
      padding: 12px;
    }
  }
}
.img-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    img{
      height: 100px;
      width: 100px;
    }
}
// /deep/ .van-image__img {
//   width: 100%;
// }
// img{
//   max-width: 100%;
// }
</style>
